<template>
    <view class="page-wrap">
        <image class="logo-image" src="../../../static/logo.png"></image>
        <text class="tips-text">轻松登录，畅享更多优质服务</text>
        <view class="input-wrap solid-bottom-1">
            <text class="prefix-text">+86</text>
            <u-input v-model="phone" type="number" placeholder="请输入手机号码" />
        </view>
        <view class="input-wrap solid-bottom-1">
            <u-input class="code-input" v-model="code" type="number" placeholder="请输入验证码" />
            <u-button type="primary" size="mini" plain :ripple="isRipple" @click="handleGetCode">{{ buttonText }}</u-button>
        </view>
        <view class="input-wrap">
            <u-checkbox v-model="agree" shape="circle">
                <view class="agreement-wrap">
                    <text class="label-text">同意</text>
                    <text class="agreement-text" @click.stop="$openWindow('pages/agreement/userAgreement')">《注册协议》</text>
                    <text class="agreement-text" @click.stop="$openWindow('pages/agreement/privacyAgreement')">《隐私协议》</text>
                </view>
            </u-checkbox>
        </view>
        <view class="login-button"><u-button type="primary" :ripple="isRipple" @click="handleCodeLogin">登录</u-button></view>
        <!-- u-divider>使用其他登录方式</u-divider>
		<view class="other-wrap">
			<u-icon class="click" size="80" name="weixin-circle-fill" color="#07bd13" @click="handleWeiXinLogin"></u-icon>
		</view> -->
        <!-- 顶部提示组件 -->
        <!-- <u-top-tips ref="uTips"></u-top-tips> -->
        <!-- 验证码倒计时组件 -->
        <!-- <u-verification-code seconds="60" ref="uCode" @change="handleCodeChange"></u-verification-code> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: '', // 注册手机号
            code: '', // 验证码
            agree: false, // 是否同意注册
            seconds: 60, // 验证码倒计时
            buttonText: '获取验证码' // 获取验证码按钮文字
        };
    },
    methods: {
        // 微信登录
        handleWeiXinLogin() {
            if (!plus) return;
            // uni.login({
            // 	provider:'weixin',
            // 	success: e => {
            // 		console.log(e);
            // 		return
            // 		this.$api.auth.appWxAuth({ code: e.code }).then(res => {
            // 			this.$setState('token', res.token);
            // 			this.handleGetUserInfo();
            // 		});
            // 	}
            // })
            // return
            plus.oauth.getServices(
                services => {
                    let aweixin = services.filter(item => item.id === 'weixin')[0];
                    if (!aweixin.authResult) {
                        aweixin.authorize(
                            e => {
                                console.log(e);
                                this.$api.auth.appWxAuth({ code: e.code }).then(res => {
                                    this.$setState('token', res.token);
                                    this.handleGetUserInfo();
                                });
                            },
                            e => {
                                this.$toast(`微信授权失败:${e.message}`);
                            }
                        );
                    } else {
                        this.$toast('已授权');
                    }
                },
                e => {
                    this.$toast('获取登录授权服务列表失败!');
                }
            );
        },
        // 获取验证码
        handleGetCode() {
            // 效验手机号码格式
            if (this.$u.test.mobile(this.phone)) {
                if (this.$refs.uCode.canGetCode) {
                    this.$api.util
                        .getCode({
                            type: 'LOGIN',
                            phone: this.phone
                        })
                        .then(res => {
                            this.$u.toast('验证码已发送');
                            this.isInputCode = true;
                            this.$refs.uCode.start();
                        });
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            } else {
                return this.$toast('手机号码格式不正确,请重新输入');
            }
        },
        // 验证码登录
        handleCodeLogin() {
            if (this.agree) {
                this.$api.auth
                    .codeLogin({
                        phone: this.phone,
                        smsCode: this.code
                    })
                    .then(res => {
                        this.$setState('token', res.token);
                        this.handleGetUserInfo();
                    });
            } else {
                this.$toast('请先同意用户协议后再登录!');
            }
        },
        // 获取用户信息
        handleGetUserInfo() {
            this.$api.user.userInfo().then(res => {
                this.$setState('userInfo', res);
                this.$openWindow({
                    type: 'tab',
                    url: 'pages/tabbar/main'
                });
                // if(res.wechat && res.phone){
                // 	this.$openWindow({
                // 		type: 'tab',
                // 		url: 'pages/tabbar/main'
                // 	});
                // }else {
                // 	this.$openWindow({
                // 		type: 'reLaunch',
                // 		url: 'pages/person/myInfo'
                // 	});
                // }
            });
        },
        handleCodeChange(text) {
            this.buttonText = text;
        },
        handleEnd() {
            // this.$u.toast("倒计时结束");
        },
        handleStart() {
            this.$toast('等待输入验证码');
        }
    }
};
</script>

<style scoped lang="scss">
.page-wrap {
    padding: 80rpx;
    .logo-image {
        width: 180rpx;
        height: 200rpx;
        margin: 0 auto;
    }
    .tips-text {
        color: #666666;
        font-size: 28rpx;
        margin-top: 70rpx;
        margin-bottom: 10rpx;
    }
    .input-wrap {
        display: flex;
        padding: 15rpx 0;
        align-items: center;
        .prefix-text {
            font-size: 36rpx;
            color: $primary-color;
            margin-right: 20rpx;
        }
        ::v-deep .u-input__input {
            font-size: 36rpx;
        }
        .code-input {
            margin-right: 20rpx;
        }
        .agreement-wrap {
            display: flex;
            padding: 10rpx 0;
            font-size: 28rpx;
            align-items: center;
            .label-text {
                color: #999999;
            }
            .agreement-text {
                color: $primary-color;
            }
        }
    }
    .login-button {
        margin: 100rpx 0;
    }
    .other-wrap {
        display: flex;
        margin-top: 30rpx;
        align-items: center;
        justify-content: center;
    }
}
</style>
